<template>
  <div>

    <div style="padding-bottom: 20px;text-align: right;">
      <el-button :type="info.shoucang == 0 ? 'info' : 'success'" @click="clickShoucang">{{ (info.shoucang == 0 ? "收藏" :
        "取消收藏") }}</el-button>
    </div>
    <el-row>
      <!-- 左侧 -->
      <el-col :span="12">
        <el-descriptions title="基本信息" border>
          <!-- 基本信息 -->
          <el-descriptions-item label="申请时间" span="1">{{ formatYearMonthDay(info.createTime) }} </el-descriptions-item>
          <el-descriptions-item label="申请人" span="1">{{ info.shenqingname }}</el-descriptions-item>

          <!-- 这里要获取事件状态 -->
          <!-- 用户名称(申请\审核人) -->
          <el-descriptions-item label="申请状态" span="1">
            <el-tag v-if="info.sta==0&&info.chexiao==0" type="warning">审核</el-tag>
            <el-tag v-if="info.sta==1&&info.chexiao==0" type="success">通过</el-tag>
            <el-tag v-if="info.sta==2&&info.chexiao==0" type="danger">拒绝</el-tag>
            <el-tag v-if="info.chexiao==1" type="info">撤销</el-tag>
          </el-descriptions-item>

          <!-- 差异信息 -->
          <el-descriptions-item label="编号" span="6">{{ info.bianhao }} </el-descriptions-item>
          <el-descriptions-item label="文号" span="6">{{ info.wenhao }} </el-descriptions-item>
          <el-descriptions-item label="公文类型" span="6">{{ info.type }} </el-descriptions-item>
          <el-descriptions-item label="收文单位" span="6">{{ info.danwei }} </el-descriptions-item>
          <el-descriptions-item label="收文时间" span="6">{{ formatYearMonthDay(info.chengwenDate) }}
          </el-descriptions-item>
          <el-descriptions-item label="标题" span="6">{{ info.biaoti }} </el-descriptions-item>
          <el-descriptions-item label="内容摘要" span="6">{{ info.zhaiyao }} </el-descriptions-item>

          <!-- 相关文件 -->
          <el-descriptions-item label="附件" span="6">
            <p v-for="(item,index2) in info.attaches " :key="index2" style="">
              <el-link :href="item.path" type="primary" target="_blank">{{ item.name }}</el-link>
            </p>
          </el-descriptions-item>
        </el-descriptions>
      </el-col>

      <!-- 右侧 -->
      <el-col :span="10" :offset="1">
        <el-row>
          <el-col :span="24">
            <div style="  font-size: 16px;font-weight: 700;color: black;padding: 0px 0px 20px 0px;"><b>审核进度</b></div>
          </el-col>
        </el-row>
        <div v-for="(audi, idx) in auditors" :key="idx">
          <el-row v-if="idx != '2'">
            <el-col :span="24">
              <div v-if="idx>0" class="step-arrow">
                <div><i class="el-icon-caret-bottom" /></div>
              </div>
            </el-col>
          </el-row>

          <div class="step" v-if="idx != '2'">
            <div class="step-title">
              <el-row>
                <el-col :span="8">
                  <el-row>
                    <el-col :span="12">
                      <div class="step-title-left">{{ audi.name }}
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <div style="color: royalblue;font-weight: bold;" v-if="cuibanShow(idx)" @click="cuiban(audi.uid)">
                        <i class="el-icon-s-promotion"> 催办</i>
                      </div>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="8">
                  <div class="step-title-center">
                    <el-tag v-if="audi.sta==0" size="mini" type="warning">未审核</el-tag>
                    <el-tag v-if="audi.sta==1" size="mini" type="primary">同意</el-tag>
                    <el-tag v-if="audi.sta==2" size="mini" type="error">拒绝</el-tag>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="step-title-right">{{ audi.stepName }}</div>
                </el-col>
              </el-row>
            </div>
            <div class="step-info">
              <el-row>
                <el-col v-if="audi.sta>0 && audi.msg=='' " :span="16">
                  <div class="msg"><i><b>意见：</b>无</i></div>
                </el-col>
                <el-col v-if="audi.sta>0 && audi.msg!='' " :span="16">
                  <div class="msg"><i><b>意见：</b>{{ audi.msg }}</i></div>
                </el-col>
                <el-col v-if="audi.sta>0" :span="8">
                  <div class="img-qm">
                    <el-image :src="audi.signimg" class="img-qm1" />
                  </div>
                </el-col>
              </el-row>
            </div>
            <div class="step-footer">
              <el-row>
                <el-col v-if="audi.sta>0" :span="24">
                  <div class="step-footer-right">{{ getFormatedTimeStr(audi.ts) }}</div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>

        <el-row>
          <el-col :span="24">
            <div v-if="info.chengbanSta>0"
              style="  font-size: 16px;font-weight: 700;color: black;padding: 10px 0px 20px 0px;"><b>领导审核</b></div>
          </el-col>
        </el-row>
        <div v-for="(audi, idx2) in chengbanren" :key="idx2">
          <el-row v-if="audi.selectDepart != 1">
            <el-col :span="24">
              <div v-if="idx2>0" class="step-arrow">
                <div><i class="el-icon-caret-bottom" /></div>
              </div>
            </el-col>
          </el-row>

          <div class="step" v-if="audi.selectDepart != 1">
            <div class="step-title-warn">
              <el-row>
                <el-col :span="8">
                  <el-row>
                    <el-col :span="12">
                      <div class="step-title-left">{{ audi.name }}
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <div style="color: royalblue;font-weight: bold;" v-if="audi.sta==0"
                        @click="cuiban(audi.uid, '待完成')">
                        <i class="el-icon-s-promotion"> 催办</i>
                      </div>
                    </el-col>
                  </el-row>
                  <!-- <div class="step-title-left">{{ audi.name }}</div> -->
                </el-col>
                <el-col :span="8">
                  <div class="step-title-center">
                    <el-tag v-if="audi.sta==0" size="mini" type="info">未完成</el-tag>
                    <el-tag v-if="audi.sta==1" size="mini" type="primary">已完成</el-tag>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="step-title-right">{{ audi.positionName }}</div>
                </el-col>
              </el-row>
            </div>
            <div class="step-info">
              <el-row>
                <el-col v-if="audi.sta>0 && audi.msg=='' " :span="16">
                  <div class="msg"><i><b>意见：</b>无</i></div>
                </el-col>
                <el-col v-if="audi.sta>0 && audi.msg!='' " :span="16">
                  <div class="msg"><i><b>意见：</b>{{ audi.msg }}</i></div>
                </el-col>
                <el-col v-if="audi.sta>0" :span="8">
                  <div class="img-qm">
                    <el-image :src="audi.signimg" class="img-qm1" />
                  </div>
                </el-col>
              </el-row>
            </div>
            <div class="step-footer">
              <el-row>
                <el-col v-if="audi.sta>0" :span="24">
                  <div class="step-footer-right">{{ getFormatedTimeStr(audi.ts) }}</div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>

        <el-row>
          <el-col :span="24">
            <div v-if="info.readers && info.readers.length > 0"
              style="  font-size: 16px;font-weight: 700;color: black;padding: 10px 0px 20px 0px;"><b>具体经办人</b></div>
          </el-col>
        </el-row>
        <div v-for="(readers, index) in info.readers" :key="index">
          <el-row>
            <div class="step">
              <div class="step-title-warn">
                <el-row>
                  <el-col :span="8">
                    <el-row>
                      <el-col :span="12">
                        <div class="step-title-left">{{ readers.name }}
                        </div>
                      </el-col>
                      <el-col :span="12">
                        <div style="color: royalblue;font-weight: bold;"
                          @click="cuiban(readers.uid, '待完成')">
                          <i class="el-icon-s-promotion"> 催办</i>
                        </div>
                      </el-col>
                    </el-row>
                  </el-col>
                  <el-col :span="8">
                  <div class="step-title-center">
                    <el-tag v-if="readers.sta==1" size="mini" type="primary">已阅办</el-tag>
                    <el-tag v-else size="mini" type="info">未阅办</el-tag>
                  </div>
                </el-col>
                  <el-col :span="8">
                    <div class="step-title-right">{{ readers.positionName }}</div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  websock
} from '@/websock'
import moment from 'moment'

export default {
	  // 组件名称
  name: 'GongwenLiuzhuanDetail',
  props: {
    id: Number,
    isYue: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      info: {},
      staStr: '',
      auditors: [],
      chengbanren: []
    }
  },
  watch: {
    id(d1, d2) {
      console.log(d1, d2)

      this.info = {}
      if (d1 === 0) return
      // 这里要改
      websock.gongwenLiuzhuanDetail({
        id: d1
      }).then(data => {
        this.info = data
        console.log(this.info)
        websock.fileTagList().then((res) => {
        for (let i = 0; i < res.length; i++) {
          if (res[i].id === this.info.fileTag) {
            this.info.type = res[i].name;
          }
        }
      });

        websock.getUserInfoByUid({
          uid: this.info.uid
        }).then(data => {
          console.log('get user info by uid', this.info.uid, data)
          this.info.shenqingname = data.name
          console.log('this info', this.info)
          this.$forceUpdate()
        })

        this.auditors = []
        for (const key in this.info.auditors) {
          this.auditors.push(this.info.auditors[key])

          websock.getUserInfoByUid({
            uid: this.info.auditors[key].uid
          }).then(data => {
            this.info.auditors[key].name = data.name
            this.info.auditors[key].signimg = data.signimg
            this.$forceUpdate()
          })
        }

        this.chengbanren = []
        for (const key in this.info.chengbanren) {
          this.chengbanren.push(this.info.chengbanren[key])

          websock.getUserInfoByUid({
            uid: this.info.chengbanren[key].uid
          }).then(data => {
            this.info.chengbanren[key].name = data.name
            this.info.chengbanren[key].signimg = data.signimg
            this.$forceUpdate()
          })
        }
      })
    },
    isYue(old){
      if(old) {
        websock.gongwenLiuzhuanDetail({id: this.id})
        .then((res) => {
          this.info.readers = res.readers;
        })
      }
    }
  },
  async mounted() {
    websock.gongwenLiuzhuanDetail({
      id: this.id
    }).then(data => {
      this.info = data
      console.log(this.info)
      websock.fileTagList().then((res) => {
        for (let i = 0; i < res.length; i++) {
          if (res[i].id === this.info.fileTag) {
            this.info.type = res[i].name;
          }
        }
      });

      websock.getUserInfoByUid({
        uid: this.info.uid
      }).then(data => {
        console.log('get user info by uid', this.info.uid, data)
        this.info.shenqingname = data.name
        console.log('this info', this.info)
        this.$forceUpdate()
      })
      this.auditors = []
      for (const key in this.info.auditors) {
        this.auditors.push(this.info.auditors[key])

        websock.getUserInfoByUid({
          uid: this.info.auditors[key].uid
        }).then(data => {
          this.info.auditors[key].name = data.name
          this.info.auditors[key].signimg = data.signimg
          this.$forceUpdate()
        })
      }

      this.chengbanren = []
      for (const key in this.info.chengbanren) {
        this.chengbanren.push(this.info.chengbanren[key])

        websock.getUserInfoByUid({
          uid: this.info.chengbanren[key].uid
        }).then(data => {
          this.info.chengbanren[key].name = data.name
          this.info.chengbanren[key].signimg = data.signimg
          this.$forceUpdate()
        })
      }

    })
  },
  created() {
    this.fetchData()
  },
  methods: {
    // 获取格式化时间字符串
    getFormatedTimeStr(stamp, str = 'MM-DD HH:mm') {
    	return moment(stamp).format(str)
    },
    fetchData() {

    },

    formatYearMonthDay(src) {
      return moment(src).format('YYYY-MM-DD')
    },
    getEventStaStr(sta) {
      if (sta === 1) {
        return '待审核'
      } else if (sta === 2) {
        return '通过'
      } else if (sta === 3) {
        return '拒绝'
      } else if (sta === 4) {
        return '撤销'
      }
    },
    getTaskStaStr(sta) {
      if (sta === 0) {
        return '未批示'
      } else if (sta === 1) {
        return '同意'
      } else if (sta === 2) {
        return '拒绝'
      } else if (sta === 3) {
        return '已撤回'
      }
    },
    onPageSizeChange(val) {
      this.pageCount = val
      this.fetchData()
    },
    onCurrentPageChange(val) {
      this.pageIndex = val
      this.fetchData()
    },
    async clickShoucang() {
      try {
        if (this.info.shoucang) {
          await websock.cancelShoucang({ id: this.info.id, typ: 18 })
          this.info.shoucang = 0
          eventBus.$emit("refreshShoucang")
        } else {
          await websock.shoucangGongwen({ id: this.info.id, typ: 18, title: this.info.biaoti, content: this.info.zhaiyao })
          this.info.shoucang = 1
          eventBus.$emit("refreshShoucang")
        }
      } catch (err) {
        console.error(err)
        this.$message.error(err.message || 'error')
      }
    },
    cuibanShow(idx) {
      console.log(idx)
      if (!this.info.auditors) return false
      // 第一个 还没审核 可以催
      if (idx == 0) {
        if (this.info.auditors['auditor' + idx].sta == 0) {
          return true
        }
      } else {
        // 不是第一个
        // 上一个审核通过了
        if (this.info.auditors['auditor' + (idx - 1)].sta == 1) {
          // 这个还没审核
          if (this.info.auditors['auditor' + idx].sta == 0) {
            return true
          }
        }
      }
      return false
    },
    async cuiban(uid, sta="待审批") {
      this.$confirm("是否催办?", { type: "warning", }).then(async () => {
        await websock.cuiban({uid: uid, processName: '公文流转申请', processStatus: sta})
        this.$message.success('催办成功')
      })
    }
  }
}
</script>

<style>
@import url("../../styles/detail.css");
</style>
